<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" title="代理商信息" width="50%">
      <el-tabs v-model="active">
        <el-tab-pane label="帐号信息" name="1">
          <el-row v-for="(value,key,index) in list" :key="index" class="account">
            <el-col :span="4" style="text-align:right;">{{ filter[key] }}:</el-col>
            <el-col :span="18">{{ value }}</el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import Eltable from '@/components/Eltable'
export default {
  components: {
    Eltable
  },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      active: '1',
      filter: {
        account: '代理商账号',
        linkman: '联系人',
        linkphone: '联系人手机',
        status: '代理商状态',
        indentity: '代理商身份',
        userNum: '拉新用户数',
        costTotal: '拉新用户消费总额'
      }
    }
  },
  computed: {
    dialogVisible() { return this.data.dialog },
    list() {
      return this.data.tableData
    }
  },
  created() {
    this.active = '1'
  },
  methods: {
    handleClose() {
      this.$emit('closed')
    }
  }
}
</script>

<style lang="scss" scoped>
.account {
  padding: 0 10px;
  .el-col {
    margin: 14px 5px;
  }
}
</style>
